<div class="backdrop"></div>
<header class="main-header">
    <button id="side-menu-toggle">Menu</button>
    <nav class="main-header__nav">
        <ul class="main-header__item-list">
            <li class="main-header__item"><a class="<%= path === '/' ? 'active' : '' %>" href="/">Shop</a></li>
            <li class="main-header__item"><a class="<%= path === '/products' ? 'active' : '' %>" href="/products">Products</a></li>
            <% if(isAuthenticated) { %>
            <li class="main-header__item"><a class="<%= path === '/cart' ? 'active' : '' %>" href="/cart">Cart</a></li>
            <li class="main-header__item"><a class="<%= path === '/orders' ? 'active' : '' %>" href="/orders">Orders</a></li>
            <li class="main-header__item"><a class="<%= path === '/admin/add-product' ? 'active' : '' %>" href="/admin/add-product">Add Product</a></li>
            <li class="main-header__item"><a class="<%= path === '/admin/products' ? 'active' : '' %>" href="/admin/products">Admin Product</a></li>
            <% } %>
        </ul>
        <ul class="main-header__item-list">
            <% if(!isAuthenticated) { %>
                <li class="main-header__item"><a class="<%= path === '/login' ? 'active' : '' %>"  href="/login">Login</a></li>
                <li class="main-header__item"><a class="<%= path === '/signup' ? 'active' : '' %>"  href="/signup">Signup</a></li>
            <% } else { %>
            <li class="main-header__item">
                <form action="/logout" method="post">
                    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                    <button type="submit">Logout</button>
                </form>
            </li>
            <% } %>
        </ul>
    </nav>
</header>

<nav class="mobile-nav">
    <ul class="mobile-nav__item-list">
        <li class="mobile-nav__item"><a class="<%= path === '/' ? 'active' : '' %>" href="/">Shop</a></li>
        <li class="mobile-nav__item"><a class="<%= path === '/products' ? 'active' : '' %>" href="/products">Products</a></li>
        <% if(isAuthenticated) { %>
        <li class="mobile-nav__item"><a class="<%= path === '/cart' ? 'active' : '' %>" href="/cart">Cart</a></li>
        <li class="mobile-nav__item"><a class="<%= path === '/orders' ? 'active' : '' %>" href="/orders">Orders</a></li>
        <li class="mobile-nav__item"><a class="<%= path === '/admin/add-product' ? 'active' : '' %>" href="/admin/add-product">Add Product</a></li>
        <li class="mobile-nav__item"><a class="<%= path === '/admin/products' ? 'active' : '' %>" href="/admin/products">Admin Product</a></li>
        <% } %>
    </ul>
    <ul class="mobile-nav__item-list">
        <% if(!isAuthenticated) { %>
            <li class="mobile-nav__item"><a class="<%= path === '/login' ? 'active' : '' %>"  href="/login">Login</a></li>
            <li class="mobile-nav__item"><a class="<%= path === '/signup' ? 'active' : '' %>"  href="/signup">Signup</a></li>
        <% } else { %>
        <li class="mobile-nav__item">
            <form action="/logout" method="post">
                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                <button type="submit">Logout</button>
            </form>
        </li>
        <% } %>
    </ul>
</nav>
